<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业</title>
	<style>
	*{margin: 0; padding: 0;}
	nav{height: 50px;
			background-color: #333;
		    justify-content: center;
		    display: flex;}
     
      nav a{
      	display: block;
      height: 50px;
    color: white;
  line-height: 50px;
   text-decoration: none;}
   .banner{height: 320px;
   	  background-repeat:no-repeat;
      	  background-position: center;
      	  background-color: black;
   }
   .product{
   	display: flex;
      			}
  .product a{display: block ;
border: solid 1px red; 
background-size: 100%  100%;
height:200px;
   width: 200px;
   margin-top: 20px; }
.product a:nth-child(odd){background-image : url(./images/homepod_large.jpg);
      		}
.product a:nth-child(even){background-image: url(./images/airpods_large.jpg);
      		}	

	@media screen  and (min-width: 800px){
		nav a{
         width: 150px;
         text-align: center;
        }
      	.banner{
      		background: url(./images/iphone_xs_large.jpg);
      		}
      	.product{
      			width: 900px;
      			margin: 0 auto;
      			justify-content: space-between;
      			
      		}
   
  	@media screen  and (max-width: 799px){
    nav{ flex-direction: column; 
position: absolute;
width: 100%;
top: 0;}
   nav a{
	display: none;
	width: 80%;
	border-bottom: 1px solid #eee;
}
  	nav:hover{
  		height: 300px;
  	align-items: center;}
  	nav:hover a{
	display:block;
}
.banner{
	margin-top: 50px;
	background-image: url(./images/iphone_xs_small.jpg);
}
  .product {
flex-wrap:wrap;
justify-content: space-around; 
  }
  	  	}
	</style>
</head>
<body>
	<nav>
		<a href="">Mac</a>
		<a href="">ipad</a>
		<a href="">iphone</a>
		<a href="">Wetch</a>
		<a href="">music</a>
		<a href="">技术支持</a>
	</nav>
	<div class="banner"></div>
	<div class="product">
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		</div>
</body>
</html>